Overview

The visual design of your app needs to adhere to the Little Lemon branding guidelines. Moving forward, use the Little Lemon brand style guide which specifies every aspect of the look and feel of the brand.

This includes typefaces, colors, how pictures and images should be used and a UI kit. A UI kit is a set of files that contains critical UI components like font sizes, icons and documentation. You may wish to revisit the following lesson items from the Principles of UX and UI course before you begin or refer to them as you go along:

On completion of this exercise, you will have all the skills to produce high-fidelity mock-ups of your app based on the wireframes you developed. For this purpose, some images, fonts and the style guide in PDF format are provided below.

Scenario

The owners of the Little Lemon restaurant have approved the wireframes for their app and want you to turn them into a high-fidelity design or a design that closely resembles the final product using their brand style guide.

Instructions

Step 1: Review the brand style guide

Examine the style guide provided by the owners of Little Lemon. This provides a starting point from which to begin working.

Download the following .fig file from the link below and import it into Figma. It contains a wireframe you will use as a base for this exercise.

Tip: If you are unsure how to import this file, please refer to the How to save and import Figma files reading in the Principles of UX and UI course .

Now that you’ve reviewed the brand style guide, let's start with creating the styles as per the style guide. Styles help you simplify your workflow, keep text and colors consistent and save you time.

Step 2: Create color styles as per the Brand style guide

Using the Little Lemon brand colors:

Create a new shape in your Figma file and go to Fill. Fill the layer with # 495E57.
Click on the four dots icon to trigger the Color Styles modal.
Click on the + icon in the right-hand corner of the Color Styles modal.
Give your style a preferred name, in this case, Primary 1, and click the Create Style button.
Repeat this process for the other colors in the style guide.

Step 3: Create text styles as per the brand style guide

Using the Little Lemon brand text styles:

Create a new text style by creating a new text layer and adding some settings. For example:
- Font family: Markazi text
- Font size: 64
- Font weight: Medium
Click on the four dots icon in the Text section to trigger the text modal.
Click on the + icon in the right corner of the Text Styles modal.
Give this text style the name Display and click on the Create Style button.
Repeat this process for the other texts in the style guide by adding the following navbar style: Karla 20 bold, sentence case.

Step 4: Add content to the placeholders on the wireframe

The Navigation bar or Header should include the logo and profile icon. In this section:

Select the logo rectangle and change the fill from solid to image .
Select the logo image from your assets folder and set it to fit .
Repeat for the user profile.
Insert the restaurant image from your assets folder and set it to fill. Give it rounded corners by setting the radius to 16.

The contents of the Hero section are the background, heading, subheading, description content, restaurant image and search bar. In this section:

Select the background rectangle and change the fill to Primary 1 in the color style.
Change the heading text, "Little Lemon", to Display and its color to Primary 2.
Change the subheading text, "Chicago", to Subheading and color to white .
Add the following content: We are a family-owned Mediterranean restaurant, focused on traditional recipes served with a modern twist. (This was provided by the owners of Little Lemon.)
Change the font to Lead text.
Insert the restaurant image from your assets folder and set it to fill. Give it rounded corners by setting the radius to 16.

For the Menu categories:

Create an auto layout button and duplicate it 3 times.
Add the text Starters, Mains, Desserts and Sides to the buttons.

For the Menu items section:

Create a food menu title, a description of the meal, a price and a photograph.

Tip: Create a component for this that can be reused for the other menu items.

Conclusion

Well done! You have applied some design fundamentals, added content and styled your wireframe to create a high-fidelity mock-up of the home screen. This takes your application one step closer to meeting the needs of the Little Lemon restaurant and its customers.